<script setup>
const emits = defineEmits(['update:value']);
const props = defineProps({
  value: {
    type: String,
    default: '',
  },
});
// function onBtnClick() {
//   emits('update:value', props.value === 'desc' ? 'asc' : 'desc');
// }
function onSortTop() {
  emits('update:value', props.value === 'asc' ? '' : 'asc');
}
function onSortBottom() {
  emits('update:value', props.value === 'desc' ? '' : 'desc');
}
</script>

<template>
  <div class="container" @click="onBtnClick">
    <slot />
    <div class="sort-warp">
      <i
        class="sort-top"
        :class="{
          active: props.value === 'asc'
        }"
        @click="onSortTop"
      >
      </i>
      <i
        class="sort-bottom"
        :class="{
          active: props.value === 'desc'
        }"
        @click="onSortBottom"
      >
      </i>
    </div>
  </div>
</template>

<style scope lang="scss">
.container {
  display: inline-flex;
  border: 1px solid #ccc;
  padding: 8px 16px;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;

  &:hover {
    background-color: #f2f9f4;
    border-color: #5bb79c;

  }

  // 画三角形
  .sort-warp {
    display: flex;
    flex-direction: column;
    margin-left: 8px;

    .sort-top {
      width: 0;
      height: 0;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-bottom: 6px solid #ccc;
      margin-bottom: 4px;

      &.active {
        border-bottom-color: red;
      }
    }

    .sort-bottom{
      width: 0;
      height: 0;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 6px solid #ccc;

      &.active {
        border-top-color: red;
      }
    }
  }


}
</style>
